<template>
    <div>
        <van-nav-bar title="评论" fixed left-arrow @click-left="$router.back()" />
        <div>
            <div class="main">
                <!-- 下拉刷新 -->
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
                    <van-list style="height: ;" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <!-- 影视评论 -->
                        <div class="pinglun">
                            <ul>
                                <li v-for="item in list" :key="item.pid">
                                    <div class="head">
                                        <img src="https://img2.doubanio.com/icon/u1000152-23.jpg" alt="">
                                        <span>{{ item.h_user }}</span>
                                        <span>{{ item.h_time }}</span>
                                    </div>
                                    <div class="cont">回复:{{ item.h_cont }}</div>
                                    <div class="bottom">
                                    </div>
                                </li>
                            </ul>
                            <!-- <van-empty description="暂无评论" /> -->
                        </div>
                    </van-list>
                </van-pull-refresh>
                <van-field class="hf" v-model="sms" center clearable label="请输入文字" placeholder="请输入文字">
                    <template #button>
                        <van-button size="small" type="primary" @click="fasong">发送</van-button>
                    </template>
                </van-field>
            </div>
        </div>
    </div>
</template>
<script>
import httpApi from '@/http';
import { Toast, Card } from 'vant';
import { Dialog } from 'vant';


export default {
    data() {
        return {
            cat_id: this.$route.params.cat_id,
            id: this.$route.query.id,
            page: 1, // 页码
            loading: false, // 下拉加载状态
            finished: false, // 所有数据是否加载完成状态
            refreshing: false, // 上拉加载状态
            list: [], // 所有数据
            lock: false,
            sms: ''
        }
    },
    methods: {
        //获取当前时间
        getNowDate() {
            var date = new Date();
            var sign2 = ":";
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day = date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
            var week = weekArr[date.getDay()];
            // 给一位数的数据前面加 “0”
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
            return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
        },
        // 发送回复信息
        fasong() {
            // l
            var user = this.$store.state.user
            if (!user) {
                Dialog.confirm({
                    title: '尚未登录',
                    message: '亲!登录后才能评论哦!点击确认前往登录,点击取消返回',
                }).then(() => {
                    this.$router.push('/login')
                })
                return
            }
            user = user.username
            var h_time = this.getNowDate()
            let params = { h_user: user, h_cont: this.sms, h_time, cat_id: this.cat_id }
            httpApi.yinshiApi.yinshi_huifu(params).then(res => {
                console.log('发送回复信息:', res);
            })
            this.onRefresh()
        },
        // 上拉刷新
        onLoad() {
            // onLoad执行时, vant会自动将loading改为true
            if (this.lock) {
                this.lock = false
                this.loading = false
                return
            }
            console.log("到底了...")
            // 发送请求, 加载下一页数据   下一页数据的page=?  与movieData.length
            let nextPage = Math.floor(this.list.length / 10) + 1; // 下一页页码
            let pagesize = 10; // 每页多少条
            let params = { cat_id: this.cat_id, page: nextPage, pagesize }
            httpApi.yinshiApi.huifu_all(params).then((res) => {

                console.log(res)

                if (res.data.data.total == this.list.length) {
                    console.log(res.data.total, this.list.length);
                    this.finished = true;
                    return
                }
                this.list.push(...res.data.data.result);
                this.loading = false;
                // this.refreshing = false;
                // 判断当前列表是否已经到底
                // 先判断是否为空
                console.log(res.data.data.total, this.list.length);
                if (res.data.data.total == this.list.length) {
                    console.log(res.data.data.total, this.list.length);
                    this.finished = true;
                }
            });
        },

        onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.pinglun()
                this.refreshing = false;
                this.finished = false;
                this.loading = false
                this.lock = true
            }, 500);
        },
        // 获取审核所有信息
        pinglun() {
            console.log('开始获取回复信息');
            let params = { cat_id: this.cat_id, page: 1, pagesize: 10 }
            console.log(params);
            httpApi.yinshiApi.huifu_all(params).then(res => {
                console.log(res);
                // 替换掉当前列表
                // this.list=[]
                // console.log('清空了数组');
                this.list.splice(
                    0,
                    this.list.length,
                    ...res.data.data.result
                );
                console.log('下拉刷新时', res.data.data.total, this.list.length);
            }).catch(err => {
                console.log(err);
            })
        },
    },
    mounted() {
    }
}
</script>

<style scoped lang="scss">
.pinglun {

    ul {
        li {
            margin: 10px 10px;
            box-shadow: 0 0 10px 2px #dcdada;
            border-radius: 10px;

            .head {
                display: flex;
                align-items: center;

                img {
                    border-radius: 10px;
                    margin: 10px 0;
                }

                span {
                    margin: 0 10px;
                }
            }

            .cont {
                margin-bottom: 10px;
            }

            .bottom {
                .van-button {
                    margin-right: 10px;
                }
            }
        }
    }
}

.hf {
    position: fixed;
    bottom: 0;
}

.van-pull-refresh {
    margin-top: 40px;
}
</style>
